<template>
    <div class="animation_box">
        <img :src="urls[urlT]" class="img" >
        <img src="./img/底1.png" class="fooder">
    </div>
</template>

<script>
import u_1 from "./img/安全运行天数.png"
import u_2 from "./img/未来诊断.png"
import u_3 from "./img/可充电量.png"
import u_4 from "./img/可放电量.png"
import u_5 from "./img/实际充满电量.png"
export default {
  data() {
    return {
        urls:[
            u_1,
            u_2,
            u_3,
            u_4,
            u_5
        ]
    };
  },
  props:{
      urlT:{
          type:Number,
          required: true
      }
  },
  created(){
  },
  methods: {
  },
};
</script>

<style scoped lang="less">
    @keyframes my-animation {
        0% {
            opacity: 1;transform:  scale(1);
        }
        30% { 
            opacity: 0.88;transform: scale(1,0.85) translate(0,-20%);
        }
        40% { 
            opacity: 1;transform: scale(1,0.9) translate(0,-8%);
        }
        50% {
            opacity: 0.88;transform:  scale(1,0.85) translate(0,-20%);
        }
        60% { 
            opacity: 1;transform: scale(1,0.9) translate(0,-8%);
        }
        70% {
            opacity: 0.88;transform: scale(1,0.85) translate(0,-20%);
        }
        100% { 
            opacity: 1;transform: scale(1);
        }
    }
    .animation_box{
        position: relative;
            height: 126px;
            width: 139px;
            display: flex;
            justify-content: center;
        .img{
            width: 85%;
            animation: my-animation 3.5s ease-in-out infinite alternate;
            img{
                width: 100%;
            }
        }
        .fooder{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            img{
                width: 100%;
            }
        }
    }
</style>